<template>
  <view class="pa-16 disFlxAC disFlxJC">
    <view
      class="capsule-tabs br-16 disFlxAC fz-14"
      :style="{ border: border ? `1rpx solid ${activeBgColor}` : 'none' }"
    >
      <view
        class="capsule-tabs__item br-16 capsule-tabs__active"
        :style="{
          width: itemWidth + 'rpx',
          left: current === 0 ? '-1rpx' : `${current * itemWidth + 1}rpx`,
        }"
      ></view>
      <template v-for="(item, index) in list" :key="index">
        <view
          class="capsule-tabs__item disFlxAC disFlxJC"
          :class="{
            'capsule-tabs__item--active': current == index,
          }"
          :style="{
            width: itemWidth + 'rpx',
          }"
          @click="handleChange(index)"
        >
          <text>{{ item }}</text>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { type PropType } from 'vue';

  const props = defineProps({
    current: propTypes.number.def(0),
    itemWidth: propTypes.number.def(176),
    list: Array as PropType<string[]>,
    defaultBgColor: propTypes.string.def('#f2f3f5'),
    activeBgColor: propTypes.string.def('#2878ff'),
    activeColor: propTypes.string.def('#fff'),
    defaultColor: propTypes.string.def('#646566'),
    border: propTypes.bool.def(false),
  });

  const emits = defineEmits(['change', 'update:current']);

  function handleChange(index: number) {
    if (props.current === index) return;
    emits('update:current', index);
    emits('change', index);
  }
</script>

<style lang="scss" scoped>
  .capsule-tabs {
    box-sizing: border-box;
    background-color: v-bind('props.defaultBgColor');
    color: v-bind('props.defaultColor');
    position: relative;
    &__item {
      position: relative;
      z-index: 2;
      height: 64rpx;
      transition: color 0.3s;
      &--active {
        color: v-bind('props.activeColor');
      }
    }
    &__active {
      position: absolute;
      left: -1rpx;
      top: 0;
      background-color: v-bind('props.activeBgColor');
      z-index: 1;
      transition: left 0.3s;
    }
  }
</style>
